<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出框和警告框插件</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="margin: 100px;">

<!--弹出框-->
<!--基本用法-->
<button class="btn btn-lg bg-danger"
        type="button"
        data-toggle="popover"
        title="Bootstrap"
        data-content="bootsatrap是一款非常好用的写前端页面的方式"
        data-animation="false"
>
        点击弹出/隐藏弹出框
</button>

<!--javascript初始化-->
<!--$('button').popover();-->


<!--有一堆属性,data-animation,data-html等等-->

<!--popover插件中事件有两种-->
<!--show.bs.tab在调用show方法时触发-->
<!--shown.bs.tab在显示整个弹窗时触发-->


<!--警告框-->
<!--基本实例-->
<div class="alert alert-warning fade in">
    <button class="close" type="button" data-dismiss="alert">
        <span>&times;</span>
    </button>
    <p>警告:您的浏览器不支持!</p>
</div>

<!--使用javascript可以代替data-dismiss="alert"-->
<!--$('.close').on('click',function(){
       $('#alert').alert('close');})-->




<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<script type="text/javascript">
    $('button').popover();
</script>
</body>
</html>